<template>
  <el-row>
    <el-col :span="9">
      <div class="box">
        <el-scrollbar>
          <basic-container>
            <el-tree
              :props="props"
              :load="loadNode"
              :expand-on-click-node=false
              @node-click="nodeClick"
              lazy>
            </el-tree>
          </basic-container>
        </el-scrollbar>
      </div>
    </el-col>
    <el-col :span="15">
      <basic-container>
        <el-button-group>
          <el-button v-hasPermi="['system:area:add']" type="primary" size="small" icon="el-icon-circle-plus-outline"
                     @click="addChildren">新增下级
          </el-button>
          <el-button v-hasPermi="['system:area:remove']" type="primary" size="small" icon="el-icon-delete"
                     @click="handleDelete">删除
          </el-button>
          <el-button v-hasPermi="['system:dept:add']" type="primary" size="small" icon="el-icon-video-play"
                     @click="handleDebug">调试
          </el-button>
        </el-button-group>
      </basic-container>
      <basic-container>
        <el-form ref="elForm" :model="regionForm" :rules="rules" size="medium" label-width="100px">
          <el-form-item label="父区划编码" prop="parentId">
            <el-input v-model="regionForm.parentId" placeholder="请输入父区划编码" readonly clearable
                      :style="{width: '100%'}"></el-input>
          </el-form-item>
          <el-form-item label="父区划名称" prop="partentName">
            <el-input v-model="regionForm.partentName" placeholder="请输入父区划名称" :maxlength="11" show-word-limit readonly
                      clearable :style="{width: '100%'}"></el-input>
          </el-form-item>
          <el-form-item label="区划编码" prop="code">
            <el-input v-model="regionForm.code" placeholder="请输入区划编码" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
          <el-form-item label="区划名称" prop="name">
            <el-input v-model="regionForm.name" placeholder="请输入区划名称" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
          <el-form-item label="行政等级" prop="type">
            <el-radio-group v-model="regionForm.type" size="medium">
              <el-radio v-for="(item, index) in typeOptions" :key="index" :label="item.value"
                        :disabled="item.disabled" border>{{item.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="区划排序" prop="sort">
            <el-input v-model="regionForm.sort" placeholder="请输入区划排序" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
          <el-form-item label="备注" prop="remarks">
            <el-input v-model="regionForm.remarks" type="textarea" placeholder="请输入备注"
                      :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
          </el-form-item>

          <el-form-item >
            <el-button @click="handleEmpty">清空</el-button>
            <el-button type="primary" @click="handleSubmit">确定</el-button>
          </el-form-item>
        </el-form>
        <el-dialog title="行政区划数据调试"
                   append-to-body
                   :visible.sync="debugBox"
                   width="350px">
          <avue-form :option="debugOption" v-model="debugForm"/>
        </el-dialog>
      </basic-container>
    </el-col>
  </el-row>
</template>

<script>
  import {getLazyTree, getArea, updateArea,addArea, delArea} from "@/api/cms/region";
  import {validatenull} from "@/utils/validate";
  import {getToken} from "@/utils/auth";

  export default {
    data() {
      return {
        props: {
          label: 'label',
          children: 'children',
          isLeaf: 'leaf'
        },
        topCode: '00',
        treeCode: '',
        treeParentCode: '',
        treeData: [],
        regionForm: {
          parentId: 0,
          partentName: '中国',
          type: 1
        },
        excelBox: false,
        excelForm: {},
        debugBox: false,
        debugForm: {},
        debugOption: {
          labelWidth: 50,
          submitBtn: false,
          emptyBtn: false,
          column: [
            {
              label: '省份',
              prop: 'province',
              type: 'select',
              props: {
                label: 'name',
                value: 'code'
              },
              cascaderItem: ['city', 'district'],
              dicUrl: '/api/blade-system/region/select',
              span: 24,
            },
            {
              label: '地市',
              prop: 'city',
              type: 'select',
              props: {
                label: 'name',
                value: 'code'
              },
              dicFlag: false,
              dicUrl: '/api/blade-system/region/select?code={{key}}',
              span: 24,
            },
            {
              label: '区县',
              prop: 'district',
              type: 'select',
              props: {
                label: 'name',
                value: 'code'
              },
              dicFlag: false,
              dicUrl: '/api/blade-system/region/select?code={{key}}',
              span: 24,
            }
          ]
        },
        queryParam: {
          parentId: '0'
        },
        rules: {
          parentId: [
            { required: true, message: "上级行政区划不能为空", trigger: "blur" }
          ],
          code: [
            { required: true, message: "区划编码不能为空", trigger: "blur" }
          ],
          name: [
            { required: true, message: "区划名称不能为空", trigger: "blur" }
          ],
          type: [
            { required: true, message: "区划等级不能为空", trigger: "blur" }
          ],
        },
        typeOptions: [{
          "label": "省级",
          "value": 1
        }, {
          "label": "市级",
          "value": 2
        }, {
          "label": "县级",
          "value": 3
        }],
        form: {
          id:'',
          code: '',

        }
      };
    },

    methods: {
      loadNode(node, resolve) {
        console.log(node)
        if (node.level === 0) {
          this.queryParam.parentId = 0
        }
        if (node.level > 0) {
          this.queryParam.parentId = node.data.value
        }
        getLazyTree(this.queryParam).then(res => {
          return resolve(res.data);
        });
      },

      nodeClick(data, node) {
        getArea(data.id).then(res => {
          this.regionForm = res.data;
          this.regionForm.partentName = node.parent.id ?  node.parent.data.label : '中国'
        })
      },
      handleEmpty(){
        this.regionForm.code = '';
        this.regionForm.name = '';
        this.regionForm.type = '';
      },
      addChildren() {
        this.regionForm.parentId = this.regionForm.id === 0 ? 0 : this.regionForm.id;
        this.regionForm.partentName = this.regionForm.parentId === 0 ? '中国' : this.regionForm.name;
        this.regionForm.id = null;
        this.regionForm.code = '';
        this.regionForm.name = '';
        this.regionForm.path = '';
        this.regionForm.sort = '';
        this.regionForm.address = '';
        this.regionForm.zipCode = '';
        this.regionForm.type = (this.regionForm.type === 0 ||  this.regionForm.type === 3 ) ? this.regionForm.type : this.regionForm.type + 1;
      },
      handleSubmit() {
        if (this.regionForm.id){
          updateArea(this.regionForm).then(() => {
            this.$message({
              type: "success",
              message: "操作成功!"
            });
          }, error => {
            window.console.log(error);
          });
        }else{
          addArea(this.regionForm).then(() => {
            this.$message({
              type: "success",
              message: "操作成功!"
            });
          }, error => {
            window.console.log(error);
          });
        }

      },
      handleDelete() {
        if (validatenull(this.regionForm.code)) {
          this.$message.warning("请先选择一项区划");
          return;
        }
        this.$confirm(`确定将 [${this.regionForm.name}] 数据删除?`, {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            return delArea(this.regionForm.id);
          })
          .then(() => {
            this.$message({
              type: "success",
              message: "操作成功!"
            });
          });
      },

      handleDebug() {
        this.debugBox = true;
      },
    }
  };
</script>

<style>
  .box {
    height: 800px;
  }

  .el-scrollbar {
    height: 100%;
  }

  .box .el-scrollbar__wrap {
    overflow: scroll;
  }
</style>
